<!-- 3D立方体柱状图 -->
<template>
    <div ref="cubeBarEchartsRef" style="width: 100%;height: 100%;"></div>
</template>
<script setup>
import { getCurrentInstance, onMounted, ref, watch } from 'vue';
import { formatTipVlaue } from '@/utils';
import * as echarts from 'echarts';
import "echarts-gl";
import { getGrid, getAxisX, getAxisY, getDataZoom } from './echarts-option';
import tipImage from '../../assets/images/tooltip.png'
const { proxy } = getCurrentInstance();
const scale = proxy.$scale;

const cubeBarEchartsRef = ref();
const props = defineProps({
    xAxisData: {//X轴数据
        type: Array,
        required: true
    },
    yAxisName: {
        type: String
    },
    seriesData: {//图标数据
        type: Array,
        required: true
    },
    cylinderWidth: {
        default: '15'//圆柱宽度
    },
    shapeColor: {
        type: Object,
        default: {
            left: ['rgba(27, 126, 242, 1)', 'rgba(0, 0, 0, 1)'],
            right: ['#1B7EF2', 'rgba(27, 126, 242, 1)'],
            top: ['#409EFF', '#409EFF'],
        }
    },
    unit: {
        type: String,
        default: '人'
    },
    fixed: {
        type: Number,
        default: 1
    },
    currentStep: {
        default: "0"
    }
});

let myChart = null;
let dragend = ref(false);
const dataZoomStart = ref(0);
const dataZoomEnd = ref(30);
//数据源
let optionsData = props.seriesData;
//X轴
let xDatas = props.xAxisData;
//颜色
let shapeColor = props.shapeColor;
//[10, 10, 30, 12, 15, 3, 7]
//监听数据变化，可以做更新图标操作
watch(() => props.seriesData, (val, oldVal) => {
    // console.log("CubeBarEcharts Change>>>");
    optionsData = val;
    if (myChart) {
        setEchartsOption(myChart, xDatas, optionsData);
    }
});
watch(() => props.xAxisData, (val, oldVal) => {
    // console.log("CubeBarEcharts Change>>>");
    xDatas = val;
    if (myChart) {
        setEchartsOption(myChart, xDatas, optionsData);
    }
});

onMounted(() => {
    myChart = echarts.init(cubeBarEchartsRef.value);
    initEcharts();
    setEchartsOption(myChart, xDatas, optionsData);
    // proxy.$bus.on('resize', (res) => {
    //     myChart.resize();
    // })
    myChart.on('dataZoom', function (event) {
        dragend.value = true;
        if (event.batch) {
            dataZoomStart.value = event.batch[0].start;
            dataZoomEnd.value = event.batch[0].end;
        } else {
            dataZoomStart.value = event.start;
            dataZoomEnd.value = event.end;
        };
    });
})
//初始化Echarts
const initEcharts = () => {
    const offsetX = 8;
    const offsetY = 4;
    // 绘制左侧面
    const CubeLeft = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x, shape.y];
            const c1 = [shape.x - offsetX, shape.y - offsetY];
            const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
            const c3 = [xAxisPoint[0], xAxisPoint[1]];
            ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
        },
    });
    // 绘制右侧面
    const CubeRight = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c1 = [shape.x, shape.y];
            const c2 = [xAxisPoint[0], xAxisPoint[1]];
            const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
            const c4 = [shape.x + offsetX, shape.y - offsetY];
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
        },
    });
    // 绘制顶面
    const CubeTop = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y];
            const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
            const c3 = [shape.x, shape.y - offsetX];
            const c4 = [shape.x - offsetX, shape.y - offsetY];
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
        },
    });
    // 注册三个面图形
    echarts.graphic.registerShape('CubeLeft', CubeLeft);
    echarts.graphic.registerShape('CubeRight', CubeRight);
    echarts.graphic.registerShape('CubeTop', CubeTop);
}
const setEchartsOption = (myChart, xAxisData, seriesData) => {
    const option = {
        // backgroundColor: '#012366',
        tooltip: {
            show: true,
            trigger: 'axis',
            padding: [0, 0, 0, 0],
            axisPointer: {
                lineStyle: {
                    width: 1,
                    type: 'solid',
                    color: '#00D1FF'
                }
            },
            backgroundColor: 'transparent',
            borderColor: 'transparent',
            shadowColor: 'transparent',
            formatter: (val) => {
                let value = formatTipVlaue(val[0].data, props.fixed);
                return `<div style="width:150px;height:55px; background:url(${tipImage}) no-repeat;background-size:contain;padding:5px 10px;">
                              <p style="font-size:12px;color:rgba(214, 243, 255, 0.9);display:flex;align-items: center ;margin-top:0px">
                                <span>${val[0].name} :&nbsp;</span>
                                <span>${value} ${props.unit}</span>   
                              </p>
                              <p style="font-size:12px;color:rgba(214, 243, 255, 0.9);display:flex;align-items: center; margin-top:5px">
                                <span>时间 :&nbsp;</span>
                                <span>第${props.currentStep}秒</span> 
                              </p>
                         </div>`
            },
        },
        grid: getGrid({}),
        textStyle: {
            color: 'rgba(221,247,255,1)',//坐标轴文字颜色
        },
        dataZoom: {
            type: 'slider',//slider
            // showDetail: false,
            orient: 'horizontal',
            bottom: 30 * scale,
            show: seriesData.length > 8,
            brushSelect: false, // 是否开启刷选功能  false-表示不能改变滚动条长度 默认true
            //数据窗口范围的起始数值和结束数值
            startValue: 0,
            endValue: 7,
            handleSize: 0,
            moveHandleSize: 0, //去掉进度条顶部的横向拉动进度条
            fillerColor: '#1FDE95', //选中的滑动条区域的颜色
            borderColor: 'transparent',
            backgroundColor: '#CFE7FA',   //两边未选中的滑动条区域的颜色
            height: 12 * scale,//自定义宽高
        },
        xAxis: {
            show: true,
            type: 'category',
            data: props.xAxisData,
            axisTick: {
                show: false,// 隐藏X轴刻度线
            },
            axisLine: {
                show: false,// 隐藏X轴主轴线
            },
            axisLabel: {//设置X轴文本
                color: '#ffffff',
                // margin: 20 * scale,
                fontSize: 24 * scale,
                interval: 0,
            },
        },
        yAxis: getAxisY({ name: '单位', unit: props.unit, showMax: true, inside: true }),
        series: [
            {
                type: 'custom',
                renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)]);
                    return {
                        type: 'group',
                        children: [
                            {
                                type: 'CubeLeft',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0.1, color: shapeColor.left[0] },
                                        { offset: 0.9, color: shapeColor.left[1] },
                                    ]),
                                },
                            },
                            {
                                type: 'CubeRight',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: shapeColor.right[0], },
                                        { offset: 1, color: shapeColor.right[1], },
                                    ]),
                                },
                            },
                            {
                                type: 'CubeTop',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: shapeColor.top[0],
                                        },
                                        {
                                            offset: 1,
                                            color: shapeColor.top[1],
                                        },
                                    ]),
                                },
                            },
                        ],
                    };
                },
                data: seriesData,
            },
            {
                type: 'bar',
                label: {
                    show: false,
                    position: 'top',
                    formatter: (e) => {
                        return e.value + '次';
                    },
                    fontSize: 16,
                    color: '#43C4F1',
                    offset: [0, -25],
                },
                itemStyle: {
                    color: 'transparent',
                },
                tooltip: {},
                data: seriesData,
            },
        ],
    };
    if (dragend.value) {
        option.dataZoom.start = dataZoomStart.value;
        option.dataZoom.end = dataZoomEnd.value;
    }
    myChart.setOption(option);
}

</script>
<style scoped></style>